<template>
  <view class="container">
    <pap-navbar :title="title" back bgColor="white" />
    <view class="grow min-h-0 bg-white">
      <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
      <u--form
        labelPosition="left"
        :model="formModel"
        :rules="rules"
        ref="uForm"
        labelWidth="100"
      >
        <u-form-item label="标题" prop="title" borderBottom>
          <u--input
            v-model="formModel.title"
            border="none"
            placeholder="请输入标题"
          ></u--input>
        </u-form-item>
        <u-form-item label="类型" prop="title" borderBottom>
          <u--input
            v-model="formModel.type"
            border="none"
            placeholder="请输入类型"
          ></u--input>
        </u-form-item>
        <u-form-item
          label="负责人"
          prop="director"
          borderBottom
          @click="
            showSex = true
            hideKeyboard()
          "
        >
          <u--input
            v-model="formModel.director"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择负责人"
            border="none"
          ></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item
          label="关注人"
          prop="method"
          borderBottom
          @click="
            showSex = true
            hideKeyboard()
          "
        >
          <u--input
            v-model="formModel.director"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择关注人"
            border="none"
          ></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item
          label="计划时间"
          prop="time"
          borderBottom
          @click="
            showPicker = true
            hideKeyboard()
          "
        >
          <!-- <u--input v-model="formModel.time" border="none"></u--input> -->
          <view class="flex align-center">
            <u--input
              v-model="formModel.quantity"
              border="none"
              placeholder="请输入运输方量"
            ></u--input>
            <view>m³ </view>
          </view>
        </u-form-item>
        <u-form-item label="优先级" prop="result" borderBottom>
          <u-radio-group
            v-model="formModel.result"
            placement="row"
            @change="groupChange"
            style="column-gap: 48rpx !important"
          >
            <u-radio
              v-for="(item, index) in radiolist"
              :key="index"
              :label="item.label"
              :name="item.name"
              style="margin: 0 32rpx"
            >
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item label="备注" prop="description" borderBottom>
          <u--textarea
            v-model="formModel.description"
            placeholder="请输入内容"
          ></u--textarea>
        </u-form-item>
        <u-form-item label="图片上传" prop="description" borderBottom>
          <u-upload
            :fileList="fileList"
            name="1"
            multiple
            :maxCount="10"
          ></u-upload>
        </u-form-item>

        <template v-if="!isEdit">
          <view
            style="height: 30rpx; margin: 0 -32rpx; background-color: #f2f3f5"
          >
          </view>

          <u-form-item
            label="区域"
            prop="method"
            borderBottom
            @click="
              showSex = true
              hideKeyboard()
            "
          >
            <u--input
              v-model="formModel.method"
              disabled
              disabledColor="#ffffff"
              placeholder="请选择处理方式"
              border="none"
            ></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <u-form-item
            label="施工配合比"
            prop="method"
            borderBottom
            @click="
              showSex = true
              hideKeyboard()
            "
          >
            <u--input
              v-model="formModel.method"
              disabled
              disabledColor="#ffffff"
              placeholder="请选择处理方式"
              border="none"
            ></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <u-form-item
            label="强度等级"
            prop="method"
            borderBottom
            @click="
              showSex = true
              hideKeyboard()
            "
          >
            <u--input
              v-model="formModel.method"
              disabled
              disabledColor="#ffffff"
              placeholder="请选择处理方式"
              border="none"
            ></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <u-form-item label="设计方量" prop="quantity" borderBottom>
            <view class="flex align-center">
              <u--input
                v-model="formModel.quantity"
                border="none"
                placeholder="请输入设计方量"
              ></u--input>
              <view>m³ </view>
            </view>
          </u-form-item>
        </template>
      </u--form>
    </view>
    <view class="opreation-group">
      <button class="TimUi-btn block bgc-52D9">提交</button>
    </view>
    <u-action-sheet
      :show="showSex"
      :actions="actions"
      title="请选择性别"
      description="如果选择保密会报错"
      @close="showSex = false"
      @select="sexSelect"
    >
    </u-action-sheet>

    <u-datetime-picker
      :show="showPicker"
      v-model="formModel.time"
      mode="datetime"
    ></u-datetime-picker>
  </view>
</template>

<script>
import { isEmpty } from '@/utils/is'
export default {
  data() {
    return {
      isEdit: false,
      title: '创建浇筑令',
      showPicker: false,
      showSex: false,
      formModel: {
        time: new Date(),
        quantity: null,
        result: null,
        method: '',
        description: ''
      },
      radiolist: [
        {
          label: '低',
          name: '0'
        },
        {
          label: '中',
          name: '1'
        },
        {
          label: '高',
          name: '2'
        }
      ],
      actions: [
        {
          name: '男'
        },
        {
          name: '女'
        },
        {
          name: '保密'
        }
      ],
      rules: {
        'userInfo.name': {
          type: 'string',
          required: true,
          message: '请填写姓名',
          trigger: ['blur', 'change']
        },
        'userInfo.sex': {
          type: 'string',
          max: 1,
          required: true,
          message: '请选择男或女',
          trigger: ['blur', 'change']
        }
      },
      radio: '',
      switchVal: false,
      fileList: []
    }
  },
  onLoad(opt) {
    if (!isEmpty(opt)) {
      this.title = '编辑浇筑令'
      this.isEdit = true
    } else {
      this.isEdit = false
    }
  },
  methods: {
    sexSelect(e) {
      this.formModel.userInfo.sex = e.name
      this.$refs.uForm.validateField('userInfo.sex')
    },
    groupChange(n) {
      console.log('groupChange', n)
    }
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.uForm.setRules(this.rules)
  }
}
</script>

<style lang="scss" scoped>
.container {
  .grow.min-h-0.bg-white {
    overflow: hidden;
    overflow-y: auto;
    padding: 0 32rpx;

    .u-radio-row {
      column-gap: 32rpx;
    }
  }
}
</style>
